<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/tags/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>photo-clip图片裁剪</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
        body {
            margin: 0;
            text-align: center;
        }
        #clipArea {
            margin: 20px;
            height: 300px;
        }
        #file,
        #clipBtn {
            margin: 20px;
        }
        #view {
            margin: 0 auto;
            width: 200px;
            height: 200px;
        }
    </style>
    <script type="text/javascript">

    </script>
</head>
<body ontouchstart="">
<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>

<script src="${ctx}/static/demo/photo_clip/jquery-2.1.3.min.js"></script>
<script src="${ctx}/static/demo/photo_clip/iscroll-zoom.js"></script>
<script src="${ctx}/static/demo/photo_clip/hammer.js"></script>
<script src="${ctx}/static/demo/photo_clip/jquery.photoClip.js"></script>
<script>
    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    $("#clipArea").photoClip({
        width: 200,
        height: 200,
        file: "#file",
        view: "#view",
        ok: "#clipBtn",
        strictSize:false,
        loadStart: function() {
            console.log("照片读取中");
        },
        loadComplete: function() {
            console.log("照片读取完成");
        },
        clipFinish: function(dataURL) {
            console.log(this)
            console.log(dataURL);
            $('#fileDate').val(dataURL);
        }
    });
</script>
<form action="${ctx}/demo/savePis.html" method="post">
    <input type="text" name="fileDate" value="" id="fileDate"/>
    <input type="submit" value="确定"/>
</form>
</body>
</html>

